<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="src/three.js"></script>
</head>
<body>
<script>
    var width=window.innerWidth;
    var height=window.innerHeight;
    var radius=500;
    //第一步 创建一个场景
    var scene=new THREE.Scene();

    //第二步 创建一个透视投影相机
    var camera=new THREE.PerspectiveCamera(90,width/height,0.1,1000);
    camera.postion=new THREE.Vector3(0,0,0);

    //第三步 创建一个球体，并将全景照片贴到球体内表面
    var geometry = new THREE.SphereBufferGeometry(radius,40,40);
    //贴纹理
    geometry.scale(-1,1,1);
    var material =new THREE.MeshBasicMaterial({
        map:new THREE.TextureLoader().load('https://zfanren.github.io/VR-effect-based-on-THREE.JS/img/3.jpg')
    });
    var mesh=new THREE.Mesh(geometry,material);
    //把球体放到场景中
    scene.add(mesh);

    //第四步 将camera拉到球体内部
    camera.target=new THREE.Vector3(radius,0,0);

    //渲染到画布上
    var renderer=new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width,height);
    var canvas = renderer.domElement;
    document.body.appendChild(canvas);

    function updata(lon,lat){
        //lat的取值范围
        lat=Math.max(-90,Math.min(90,lat));
        //lon的取值范围
        lon=lon>0?lon%360:lon%360+360;

        //转换成弧度
        lat = THREE.Math.degToRad(lat);
        lon = THREE.Math.degToRad(lon);

        //经纬度转换成ThreeJS坐标

        camera.target.x=500*Math.cos(lat)*Math.cos(lon);
        camera.target.y=5500*Math.sin(lat);
        camera.target.z=5500*Math.cos(lat)*Math.sin(lon);

        camera.lookAt(this.camera.target);
        renderer.render(scene,camera);
    }

    var lon=0,lat=0;
    function animate(){
        updata(lon,lat);
        requestAnimationFrame(animate);
    }
    animate();

    //手指操作
    var container = document.body;
    var startX,startY,lastX,lastY,curX,curY,
        factor=80,
        speedX,speedY,
        startTime,
        deceleration=1,
        isMoving=false,
        animatInt;
    container.addEventListener('touchstart',function(evt){
        var obj=evt.targetTouches[0];
        startX=lastX=obj.clientX;
        startY=lastY=obj.clientY;
        startTime=Date.now();
        isMoving=true;
    });
    container.addEventListener('touchmove',function(evt){
        var obj=evt.targetTouches[0];
        curX = obj.clientX;
        curY = obj.clientY;

        lon -= ((curX-lastX)/radius)*factor;
        lon -= ((curY-lastY)/radius)*factor;

        lastX=curX;
        lastY=curY;
    });
    container.addEventListener('touched',function(){
        isMoving = false;
        var t=(Date.now()-startTime)*0.1;
        speedX=(curX-startX)/t;
        speedY=(curY-startY)/t;

        subSpeedAnimate();
    });

    function subSpeed(speed){
        if(speed>0){
            speed -= deceleration;
            if(speed<0){
                speed =0;
            }
        }
        if(speed<0){
            speed+=deceleration;
            if(speed<0){
                speed = 0;
            }
        }
        return speed;
    }

    function subSpeedAnimate(){
        speedX=subSpeed(speedX);
        speedY=subSpeed(speedY);
        lon -= speedX/radius*factor;
        lat -= speedY/radius*factor;

        if((speedX ===0&&speedY===0)||isMoving){
            if(animatInt){
                canceAnimationFrame(animatInt);
                animatInt=undefined;
            }
            return;
        }
        animaInt=requestAnimationFrame(subSpeedAnimate);
    }
</script>
</body>
</html>
